import React, { useState, useEffect } from 'react';
import { Divider, Button, Row, Col, Input, Popconfirm } from 'antd';
import { getMallNotice, postMallNotice } from '@/services/mall/api';
import { MsgType, replaceRichTextImgHost, submitRichTextImgHost, showMsg } from '@/utils/utils';
import RichText from '@/components/RichText'
import BraftEditor from 'braft-editor';
import PermissionControl from '@/components/PermissionControl';
import { imgHostUrl, imgPrefix, miniPro } from '@/utils/constants';

const Notice: React.FC = () => {
  const [disabled, setDisabled] = useState<boolean>(true);
  const [noticeList, setNoticeList] = useState<MALLAPI.NoticeItem[]>([]);
  const [title, setTitle] = useState<string>('');
  const [loading, setLoading] = useState<boolean>(false);
  const [visbile, setVisible] = useState<boolean>(false);
  const [editorState, setEditorState] = useState<any>(BraftEditor.createEditorState(null))
  
  const onPublish = async () => {
    if (disabled) {
      return;
    }
    if (editorState.isEmpty()) {
      showMsg('请填写公告通知内容', MsgType.INFO)
      return
    }

    if (loading) {
      return;
    }

    try {
      setLoading(true);
      await postMallNotice({
        title: title || noticeList[0].title,
        notice_content:  submitRichTextImgHost(editorState.toHTML())
      });
      showMsg('已生效', MsgType.SUCCESS);
      setDisabled(true);
      setLoading(false);
    } catch (error) {
      showMsg(error?.data?.errmsg);
      setLoading(false);
    }
  }

  const fetchNotice = async () => {
    try {
      const data: MALLAPI.NoticeItemList = await getMallNotice();
      setNoticeList(data.record_list);
      let content = data.record_list[0]?.notice_content
      content = replaceRichTextImgHost(content);
      setEditorState(BraftEditor.createEditorState(content))
    } catch (error) {
      console.log(error);
      showMsg(error?.data?.errmsg);
    }
  }

  useEffect(() => {
    fetchNotice();
  }, []);

  return <div className="notice-info">
     <div className="header">
       <div className="title">2.公告通知</div>
       <div className="btns">
          <PermissionControl action_id="500500004">
            <Button style={{marginRight: 10}} onClick={() => {
              setDisabled(false)
            }} type="primary">编辑</Button>
          </PermissionControl>
          <PermissionControl action_id="500500005">
            <Popconfirm
              placement="topRight"
              visible={visbile}
              title="请核对内容准确无误，一经发布，无法撤回"
              onConfirm={async () => {
                setLoading(true);
                await onPublish()
                setLoading(false);
                setVisible(false);
              }}
              okButtonProps={{
                loading
              }}
              onCancel={() => {
                setLoading(false);
                setVisible(false);
              }}
              onVisibleChange={() => console.log('visible change')}
              disabled={disabled}
            >
              <Button onClick={() => setVisible(true)} type="primary" disabled={disabled}>发布</Button>
            </Popconfirm>
         </PermissionControl>
      </div>
     </div>

    <Divider style={{margin: '10px 0'}} />

    <div className="info-body">
      <Row className="row">
        <Col span={2}>标题：</Col>
        <Col span={22}>
          <Input
            onChange={(e: any) => {
              setTitle(e.target.value);
            }} 
            value={title || noticeList[0]?.title}
            disabled={disabled}/>
        </Col>
      </Row>

      <Row className="row">
        <Col span={2}>内容：</Col>
        <Col span={22}>
          <RichText 
            readOnly={disabled}
            setEditorState={setEditorState} 
            editorState={editorState}/>
        </Col>
      </Row>
    </div>
  </div>
}

export default Notice;